<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="zxx">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Agricfarm an Agriculture Category Bootstrap Responsive Template | Contact :: W3layouts</title>
  <!-- google fonts -->
  <link href="//fonts.googleapis.com/css2?family=Poppins:wght@300;600;700&display=swap" rel="stylesheet">
  <!-- google fonts -->
  <!-- Template CSS -->
  <link rel="stylesheet" href="assets/css/style-starter.css">
  <link rel="stylesheet" href="./element/index.css">
  <!-- Template CSS -->
</head>

<body>
  <!--header-->
  <div id="app">
    <header id="site-header" class="fixed-top">
      <div class="container">
        <nav class="navbar navbar-expand-lg stroke">
          <h1><a class="navbar-brand mr-lg-5" href="index.html">
              Agric<span>farm</span>
            </a></h1>
          <!-- if logo is image enable this   
        <a class="navbar-brand" href="#index.html">
            <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
        </a> -->
          <button class="navbar-toggler  collapsed bg-gradient" type="button" data-toggle="collapse"
            data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
            <span class="navbar-toggler-icon fa icon-close fa-times"></span>
            </span>
          </button>
  
          <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="about.html">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="services.html">Services</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="contact.html">Contact</a>
              </li>
  
            </ul>
          </div>
          <div class="d-lg-block d-none">
            <a href="contact.html" class="btn btn-style btn-secondary ml-lg-3">{{user.username || 'Free Quote'}}</a>
          </div>
          <!-- toggle switch for light and dark theme -->
          <div class="mobile-position">
            <nav class="navigation">
              <div class="theme-switch-wrapper">
                <label class="theme-switch" for="checkbox">
                  <input type="checkbox" id="checkbox">
                  <div class="mode-container">
                    <i class="gg-sun"></i>
                    <i class="gg-moon"></i>
                  </div>
                </label>
              </div>
            </nav>
          </div>
          <!-- //toggle switch for light and dark theme -->
        </nav>
      </div>
    </header>
    <!-- //header -->
    <!-- about breadcrumb -->
    <section class="w3l-about-breadcrumb text-left">
      <div class="breadcrumb-bg breadcrumb-bg-about py-sm-5 py-4">
        <div class="container">
          <h2 class="title">Contact</h2>
          <ul class="breadcrumbs-custom-path mt-2">
            <li><a href="#url">Home</a></li>
            <li class="active"><span class="fa fa-arrow-right mx-2" aria-hidden="true"></span> Contact </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- //about breadcrumb -->
     <!-- /contact-->
    <div class="contact-form py-5" id="contact">
      <div class="container py-lg-5 py-md-4">
        <h3 class="hny-title mb-lg-5 mb-4">Get in touch</h3>
          <div class="contacts12-main mb-5">
              <form>
                  <div class="main-input">
                      <div class="d-grid">
                          <input type="text" name="w3lName" id="w3lName" placeholder="Your Name" class="contact-input" />
                          <input type="password" name="w3lPhone" id="w3lPwd" placeholder="Phone Number"
                              class="contact-input" />
                      </div>
                      <!-- <div class="d-grid">
                          <input type="email" name="w3lSender" id="w3lSender" placeholder="Your Email id"
                              class="contact-input" required />
                          <input type="text" name="w3lSubject" id="w3lSubject" placeholder="Subject"
                              class="contact-input" />
                      </div> -->
                  </div>
                  <textarea class="contact-textarea" name="w3lMessage" id="w3lMessage"
                      placeholder="Type your message here" required></textarea>
                  <div class="text-right">
                      <button id="user_submit" @click="submit" class="btn btn-style btn-secondary btn-contact">Submit Now</button>
                  </div>
              </form>
          </div>
              
          <div class="row pt-lg-4">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <div class="contact-address">
                            <ul>
                                <li class="icon-color"><span class="fa fa-map-marker"></span> <span>703 Homestead Street
                                        <br>Waltham, MA 02453</span> </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-md-0 mt-4">
                        <div class="contact-address">
                            <ul>
                                <li class="icon-color"><span class="fa fa-phone"></span> <span><a class="" href="tel:+(21)-234-9999">Phone :+(21)-234-9999</a>
                                   <a class="" href="tel:+(21)-234-8888">Fax :+(21)-234-8888</a></span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-lg-0 mt-4">
                        <div class="contact-address">
                            <ul>
                                <li class="icon-color"><span class="fa fa-mail-reply"></span><span>
                                    <a href="mailto:agricfarm@mail.com"> Agricfarm@mail.com</a>
                                    <a href="mailto:info@agricfarm.com"> info@Agricfarm1.com</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
      <div class="maphny">
          <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387190.2895687731!2d-74.26055986835598!3d40.697668402590374!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sin!4v1562582305883!5m2!1sen!2sin"
              frameborder="0" style="border:0" allowfullscreen=""></iframe>
      </div>
  
  <!--//contact-->
   
    <!--/w3l-footer-29-main-->
    <section class="w3l-footer-29-main">
      <div class="footer-29 py-5">
        <div class="container py-lg-4">
          <div class="row footer-top-29">
            <div class="footer-list-29 col-lg-4">
              <h6 class="footer-title-29">About Us</h6>
              <p class="pr-lg-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae laudantium
                voluptate rem ullam dolore nisi voluptatibus esse quasi.Integer sit amet mattis quam.</p>
              <div class="main-social-footer-29 mt-4">
                <a href="#facebook" class="facebook"><span class="fa fa-facebook"></span></a>
                <a href="#twitter" class="twitter"><span class="fa fa-twitter"></span></a>
                <a href="#instagram" class="instagram"><span class="fa fa-instagram"></span></a>
                <a href="#linkedin" class="linkedin"><span class="fa fa-linkedin"></span></a>
              </div>
            </div>
  
            <div class="col-lg-2 col-md-6 col-sm-4 footer-list-29 footer-2 mt-lg-0 mt-5">
  
              <ul>
                <h6 class="footer-title-29">Useful Links</h6>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="#"> Blog posts</a></li>
                <li><a href="contact.html">Contact us</a></li>
              </ul>
            </div>
            <div class="col-lg-3 col-md-6 footer-list-29 footer-3 mt-lg-0 mt-5">
              <ul>
                <h6 class="footer-title-29">Services</h6>
                <li>
                  <a href="#url">
                    Healthy Milk
                  </a>
                </li>
                <li>
                  <a href="#url">
                    Organic Food
                  </a>
                </li>
                <li>
                  <a href="#url">
                    Fresh Fruits
                  </a>
                </li>
                <li>
                  <a href="#url">
                    Tree Planting
                  </a>
                </li>
                <li>
                  <a href="#url">
                    Gardening
                  </a>
                </li>
              </ul>
  
  
            </div>
            <div class="col-lg-3 col-md-6 col-sm-8 footer-list-29 footer-1 mt-lg-0 mt-5">
              <h6 class="footer-title-29">Contact Us</h6>
              <ul>
                <li>
                  <p><span class="fa fa-map-marker"></span> Agricfarm, #49436 block, #888 Honey rd
                    Newyork</p>
                </li>
                <li><a href="tel:+7-800-999-800"><span class="fa fa-phone"></span> +(21)-255-999-8888</a></li>
                <li><a href="mailto:Agricfarm@mail.com" class="mail"><span class="fa fa-envelope-open-o"></span>
                    Agricfarm@mail.com</a></li>
              </ul>
            </div>
  
          </div>
        </div>
      </div>
    </section>
  
    <section class="w3l-footer-29-main w3l-copyright">
      <div class="container">
        <div class="bottom-copies">
          <p class="copy-footer-29 text-center">© 2020 Agricfarm. All rights reserved. Design by <a
              href="https://w3layouts.com/" target="_blank">
              W3Layouts</a></p>
        </div>
      </div>
  
      <!-- move top -->
      <button onclick="topFunction()" id="movetop" title="Go to top">
        <span class="fa fa-angle-up"></span>
      </button>
      <script>
        // When the user scrolls down 20px from the top of the document, show the button
        window.onscroll = function () {
          scrollFunction()
        };
  
        function scrollFunction() {
          if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("movetop").style.display = "block";
          } else {
            document.getElementById("movetop").style.display = "none";
          }
        }
  
        // When the user clicks on the button, scroll to the top of the document
        function topFunction() {
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0;
        }
      </script>
      <!-- /move top -->
    </section>
    <!-- //footer-29 block -->
    <!-- disable body scroll which navbar is in active -->
    <script>
      // $(function () {
      //   $('.navbar-toggler').click(function () {
      //     $('body').toggleClass('noscroll');
      //   })
      // });
    </script>
    <!-- disable body scroll which navbar is in active -->
  
    <!-- Template JavaScript -->
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/theme-change.js"></script>
    <!--/MENU-JS-->
    <script>
      $(window).on("scroll", function () {
        var scroll = $(window).scrollTop();
  
        if (scroll >= 80) {
          $("#site-header").addClass("nav-fixed");
        } else {
          $("#site-header").removeClass("nav-fixed");
        }
      });
  
      //Main navigation Active Class Add Remove
      $(".navbar-toggler").on("click", function () {
        $("header").toggleClass("active");
      });
      $(document).on("ready", function () {
        if ($(window).width() > 991) {
          $("header").removeClass("active");
        }
        $(window).on("resize", function () {
          if ($(window).width() > 991) {
            $("header").removeClass("active");
          }
        });
      });
    </script>
  </div>
  <!--//MENU-JS-->

  <script src="assets/js/bootstrap.min.js"></script>
  <script src="./config/jquery.min.js"></script>
  <script src="./config/vue.min.js"></script>
  <script src="./element/index.js"></script>
  <script src="./config/axios.js"></script>
  <script src="./contact.js"></script>


</body>

</html>